<template>
  <ScrollRefresh @refresh="onRefresh" @loadmore="onLoadmore">
    <div class="photo-container">
      <div class="photo-item" v-for="(item, index) in photolist" :key="item">
        <van-image class="img" v-if="item.url" :src="item.url" @click="onImg(item)">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </div>
    </div>
  </ScrollRefresh>
  <van-image-preview v-model:show="showPreview" :images="[previewItem.url]" closeable>
    <template #index>{{ previewItem.title }}</template>
  </van-image-preview>
</template>

<script setup>
import { ref } from 'vue';
import { getImages } from '@/api/open.js'
import { ScrollRefresh } from '@/components'

const photolist = ref([])
const showPreview = ref(false)
const previewItem = ref([])

init()
function init() {
  getPhotoes()
}

function getPhotoes() {
  getImages({
    size: 20
  }).then(res => {
    let imgsarr = res.result?.list || []
    photolist.value?.push(...imgsarr)
    console.log('壁纸列表', photolist.value);
  })
}

function onImg(e) {
  console.log('点击', e);
  previewItem.value = e
  showPreview.value = true
}

function onRefresh(e) {
  getImages({
    size: 20
  }).then(res => {
    photolist.value = res.result?.list || []
    console.log('壁纸列表', photolist.value);
    e(false) // 接收回调，关闭下拉刷新
  })
}

function onLoadmore() {
  getPhotoes()
}

</script>

<style lang="scss" scoped>
.photo-container {
  column-gap: 0.25rem;
  padding: 0 0.25rem;

  .photo-item {
    margin-bottom: 0.25rem;
    border-radius: 0.25rem;
    overflow: hidden;

    .img {
      display: flex;
      width: 100%;
      height: 100%;
    }
  }
}

// 屏幕小于800px时
@media screen and (max-width: 800px) {
  .photo-container {
    column-count: 2;
  }
}

// 屏幕大于800px时
@media screen and (min-width: 800px) {
  .photo-container {
    column-count: 3;
  }
}

// 屏幕大于1300px时
@media screen and (min-width: 1300px) {
  .photo-container {
    column-count: 4;
  }
}
</style>